<template>
	<el-aside width="180px" class="aside" ref="asideChange">
		<el-image class="headImg" ref="headImgChange" src="/static/img/logo.jpg" fit="contain"></el-image>
		<el-menu :collapse="fold" class="menu sele_none" :default-active="onRoutes" background-color="#fff" text-color="#000" active-text-color="#ff6a6c" unique-opened router>
			<template v-for="item in items">
				<template v-if="item.subs && item.subs.length > 0">
					<el-submenu :index="item.url" :key="item.index">
						<template slot="title">
							<i class="icon margin_r_20" :class="item.icon"></i>
							<span slot="title">{{ item.title }}</span>
						</template>
						<template v-for="subItem in item.subs">
							<el-menu-item :index="subItem.url" :key="subItem.index">{{ subItem.title }}</el-menu-item>
						</template>
					</el-submenu>
				</template>
				<template v-else>
					<el-menu-item :index="item.url" :key="item.index">
						<i class="icon margin_r_20" :class="item.icon"></i>
						<span slot="title">{{ item.title }}</span>
					</el-menu-item>
				</template>
			</template>
		</el-menu>
	</el-aside>
</template>

<script>
import bus from '@/common/bus';
export default {
	data() {
		return {
			fold: false,
			items: [],
			datas: []
		};
	},
	methods: {
		getSubs(params) {
			let arr = this.datas.filter(x => x.module_parent_guid == params.guid);
			let subs = [];
			arr.forEach(data => {
				subs.push({
					index: 'sub_' + data.id,
					url: data.module_url || 'sub_' + data.id,
					title: data.module_name
				});
			});

			return subs;
		},
		getMenu() {
			const res = {
				code: 200,
				msg: '',
				datas: {
					authorize_modules: [
						{
							id: 63,
							guid: '3f853e04-eab3-4019-93fc-9478cda764c9',
							module_parent_guid: '',
							module_name: '品牌管理',
							module_sys_name: null,
							module_type: null,
							module_url: '',
							module_icon: 'iconfont iconyingyong',
							module_img_url: null,
							module_level: 1,
							module_code: '10009'
						},
						{
							id: 26,
							guid: '5437d34a-3de2-4347-a893-3ffff57e2162',
							module_parent_guid: '3f853e04-eab3-4019-93fc-9478cda764c9',
							module_name: '品牌列表',
							module_sys_name: 'member 会员',
							module_type: '',
							module_url: '/pages/member/list/pingPaiLieBiao',
							module_icon: '',
							module_img_url: '',
							module_level: 2,
							module_code: '10009.20012'
						},
						{
							id: 27,
							guid: '5437d34a-3de2-4347-a893-3ffff57e2162',
							module_parent_guid: '3f853e04-eab3-4019-93fc-9478cda764c9',
							module_name: '新客户',
							module_sys_name: 'member 会员',
							module_type: '',
							module_url: '/pages/member/list/xinKeHu',
							module_icon: '',
							module_img_url: '',
							module_level: 2,
							module_code: '10009.20012'
						},
						{
							id: 28,
							guid: '5437d34a-3de2-4347-a893-3ffff57e2162',
							module_parent_guid: '3f853e04-eab3-4019-93fc-9478cda764c9',
							module_name: '地图',
							module_sys_name: 'member 会员',
							module_type: '',
							module_url: '/pages/member/list/diTu',
							module_icon: '',
							module_img_url: '',
							module_level: 2,
							module_code: '10009.20012'
						},
						{
							id: 61,
							guid: '0f15d115-c4b8-46a8-9469-b1c404aab6e6',
							module_parent_guid: '',
							module_name: '无人直播',
							module_sys_name: null,
							module_type: null,
							module_url: '',
							module_icon: 'iconfont iconyonghu',
							module_img_url: null,
							module_level: 1,
							module_code: '10006'
						},
						{
							id: 62,
							guid: 'd9105323-15dc-43a2-9165-13d0f36f4c2a',
							module_parent_guid: '0f15d115-c4b8-46a8-9469-b1c404aab6e6',
							module_name: '签约客户',
							module_sys_name: 'app 应用轮播图',
							module_type: '',
							module_url: '/pages/member/hezuo/qianYueKeHu',
							module_icon: '',
							module_img_url: '',
							module_level: 2,
							module_code: '10006.20012'
						},
						{
							id: 63,
							guid: 'd9105323-15dc-43a2-9165-13d0f36f4c2a',
							module_parent_guid: '0f15d115-c4b8-46a8-9469-b1c404aab6e6',
							module_name: '交互客户',
							module_sys_name: 'app 应用轮播图',
							module_type: '',
							module_url: '/pages/member/hezuo/jiaoHuKeHu',
							module_icon: '',
							module_img_url: '',
							module_level: 2,
							module_code: '10006.20012'
						},
						{
							id: 64,
							guid: 'd9105323-15dc-43a2-9165-13d0f36f4c2a',
							module_parent_guid: '0f15d115-c4b8-46a8-9469-b1c404aab6e6',
							module_name: '复购客户',
							module_sys_name: 'app 应用轮播图',
							module_type: '',
							module_url: '/pages/member/hezuo/fuGouKeHu',
							module_icon: '',
							module_img_url: '',
							module_level: 2,
							module_code: '10006.20012'
						},
						{
							id: 50,
							guid: 'f517cade-46ee-4735-9a1d-b48be2f9d1cc',
							module_parent_guid: '',
							module_name: '系统设置',
							module_sys_name: 'sys',
							module_type: '',
							module_url: '',
							module_icon: 'iconfont iconxitongshezhi',
							module_img_url: '',
							module_level: 1,
							module_code: '10065'
						},
						{
							id: 55,
							guid: '4482135a-09c9-4b08-93e4-955e8c5e6314',
							module_parent_guid: 'f517cade-46ee-4735-9a1d-b48be2f9d1cc',
							module_name: '账号管理',
							module_sys_name: 'sys.user 账号',
							module_type: '',
							module_url: '/pages/system_set/account/account',
							module_icon: '',
							module_img_url: '',
							module_level: 2,
							module_code: '10065.20008'
						},
						{
							id: 53,
							guid: '8006f8db-f724-453e-bf91-7c5e5a2daf95',
							module_parent_guid: 'f517cade-46ee-4735-9a1d-b48be2f9d1cc',
							module_name: '角色管理',
							module_sys_name: 'sys.role 角色',
							module_type: '',
							module_url: '/pages/system_set/role/role',
							module_icon: '',
							module_img_url: '',
							module_level: 2,
							module_code: '10065.20006'
						},
					]
				}
			};

			this.datas = res.datas.authorize_modules;
			this.datas.forEach(data => {
				if (data.module_parent_guid == '')
					this.items.push({
						icon: data.module_icon,
						url: data.module_url || data.id + '',
						index: data.id + '',
						title: data.module_name,
						subs: this.getSubs(data)
					});
			});

			uni.setStorage({
				key: '__menu',
				data: this.datas
			});
			return;
			this.$axios.get('sys/module/authorize').then(res => {
				if (res.code == 200) {
					this.datas = res.datas.authorize_modules;
					this.datas.forEach(data => {
						if (data.module_parent_guid == '')
							this.items.push({
								icon: data.module_icon,
								url: data.module_url || data.id + '',
								index: data.id + '',
								title: data.module_name,
								subs: this.getSubs(data)
							});
					});
				}
			});
		}
	},
	created() {
		bus.$on('fold', res => {
			this.fold = res;
			if (res) {
				this.$refs.asideChange.$el.style.width = '64px';
				this.$refs.headImgChange.$el.style.width = '64px';
				this.$refs.headImgChange.$el.style.height = '100px';
			} else {
				this.$refs.asideChange.$el.style.width = '180px';
				this.$refs.headImgChange.$el.style.width = '100%';
				this.$refs.headImgChange.$el.style.height = '100px';
			}
		});

		this.items = [];

		if (this.items.length <= 0) {
			this.getMenu();
		}
	},
	computed: {
		onRoutes() {
			return this.$route.path;
		}
	}
};
</script>

<style>
>>> .el-menu {
	border: none;
}

>>> .el-submenu__title:hover,
>>> .el-menu-item:hover,
>>> .el-submenu__title:hover i {
	color: #ff6a6c !important;
	background-color: #fff !important;
}

>>> .el-submenu__icon-arrow {
	transform: rotate(-90deg);
	top: 31px;
	right: 20px;
}

>>> .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
	transform: rotate(0deg);
}

>>> .el-submenu .el-menu-item {
	padding: 0 0 0 68px !important;
	min-width: initial !important;
}

>>> .el-menu-item i {
	color: #909399;
}

>>> .el-menu-item.is-active:after {
	content: ' ';
	position: absolute;
	right: 0rem;
	width: 0.3125rem;
	height: 1.25rem;
	background-color: #ff6a6c;
	top: 50%;
	transform: translate(0, -50%);
}

.aside {
	background-color: #ffffff;
	overflow-x: hidden;
	overflow-y: hidden;
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	transition: all 0.3s ease-in-out;
}

.headImg {
	width: 100%;
	height: 100px;
	transition: all 0.3s ease-in-out;
}

.menu {
	overflow: auto;
	height: calc(100% - 100px);
	overflow-x: hidden;
}

.main::-webkit-scrollbar {
	display: none;
}

.icon {
	font-size: 20px;
}
</style>
